<template>
	<div class="banner-container">
		<swiper class="swiper" :style="{width: '100vw', height: '100%'}" :indicator-dots="swiperConfig.indicatorDots"
		 :indicator-color="swiperConfig.indicatorColor" :indicator-active-color="swiperConfig.indicatorActiveColor" :autoplay="swiperConfig.autoplay"
		 :interval="swiperConfig.interval" :duration="swiperConfig.duration" :circular="swiperConfig.circular"
		 :previous-margin="swiperConfig.previousMargin" :next-margin="swiperConfig.nextMargin" @change="swiperChange"
		 @animationfinish="animationfinish">

			<swiper-item class="swiper_item" v-for="(item, i) in bannerList" :key="i">
				<!-- 1.当前展示为第1项时，bannerList最后一项和第二项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
				<!-- 2.当前展示为最后一项时，bannerList倒数第2项和第1项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
				<!-- 3.当前展示为其他项（非第1和最后1项）时，bannerList当前项的前1项和后1项的justifyContent值分别为flex-end和flex-start，其余项值为center -->
				<!-- 4.padding值也需要根据不同项设定不同值，但理同justifyContent -->
				<div class="image-container" :class="[curIndex===0?((i===listLen-1)?'item-left':(i===1?'item-right':'item-center')):(curIndex===listLen-1?(i===0?'item-right':(i===listLen-2?'item-left':'item-center')):(i===curIndex-1?'item-left':(i===curIndex+1?'item-right':'item-center')))]">
					<image :src="item.url" class="slide-image" :style="{
						transform: curIndex===i?'scale(' + scaleX + ',' + scaleY + ')':'scale(1,1)',
						transitionDuration: '.3s',
						transitionTimingFunction: 'ease'
					}"
					 @click="getBannerDetail(item)" />
				</div>

				<view class="order" v-if="swiperCurrent == i" @click="getBannerDetail(item)">
					<image :src="'/static/image/icon/' + (pitchOn ? 'order_icon_choice_pre' : 'order_select_nor' ) + '.png'" mode=""></image>
				</view>
			</swiper-item>
		</swiper>

		<view class="tods">
			<block v-for="(item,index) in bannerList.length" :key="item">
				<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
			</block>
		</view>
	</div>
</template>
<script>
	export default {
		props: {
			bannerList: {
				type: Array,
				default () {
					return []
				}
			},

			swiperConfig: {
				type: Object,
				default () {
					return {
						indicatorDots: false,
						indicatorColor: 'rgba(255, 255, 255, .4)',
						indicatorActiveColor: 'rgba(255, 255, 255, 1)',
						autoplay: false,
						interval: 3000,
						duration: 300,
						circular: true,
						previousMargin: '58upx',
						nextMargin: '58upx'
					}
				}
			},

			scaleX: {
				type: String,
				default: (634 / 550).toFixed(4)
			},

			scaleY: {
				type: String,
				default: (378 / 328).toFixed(4)
			}
		},

		computed: {
			listLen() {
				return this.bannerList.length
			}
		},

		data() {
			return {
				curIndex: 0,
				descIndex: 0,
				isDescAnimating: false,
				swiperCurrent: 0,
				pitchOn: false,
			}
		},

		methods: {
			swiperChange(e) {
				const that = this
				this.pitchOn = false
				this.curIndex = e.mp.detail.current
				this.isDescAnimating = true
				let timer = setTimeout(function() {
					that.descIndex = e.mp.detail.current
					clearTimeout(timer)
				}, 150)

				this.swiperCurrent = e.detail.current;
			},

			animationfinish(e) {
				this.isDescAnimating = false
			},

			getBannerDetail(item) {
				// var imgUrl = this.$store.state.userPhotoUrl;
				var shareImgUrl = "";
				this.pitchOn = !this.pitchOn;

				this.http.httpTokenRequest({
					url: "/user/invite",
					method: "post"
				}, {
					img: item.type
				}).then(res => {
					//console.log("invite", res)
					if (res.data.status == 1000) {
						shareImgUrl = imgUrl + res.data.data.img_url;
						//console.log("shareImgUrl", shareImgUrl);

						uni.setStorage({
							key: 'share',
							data: shareImgUrl,
							success: function() {
								//console.log('success');
							}
						});
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.msg,
							duration: 2000
						});
					}
				}, error => {
					//console.log(error);
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.banner-container {
		z-index: 888;
		width: 100vw;
		height: 100%;
		position: relative;

		.swiper_item {
			position: relative;

			.order {
				position: absolute;
				bottom: 20upx;
				right: 70upx;
				z-index: 889;
				width: 44upx;
				height: 44upx;

				image {
					width: 44upx;
					height: 44upx;
				}
			}
		}

		.image-container {
			box-sizing: border-box;
			width: 100%;
			height: 100%;
			display: flex;

			.slide-image {
				width: 460upx;
				height: 100%;
				z-index: 200;
			}
		}

		.item-left {
			justify-content: flex-end;
			padding: 56upx 26upx 0 0;
		}

		.item-right {
			justify-content: flex-start;
			padding: 56upx 0 0 26upx;
		}

		.item-center {
			justify-content: center;
			padding: 56upx 0 0 0;
		}

		.tods {
			z-index: 889;
			position: absolute;
			bottom: -60upx;
			left: 50%;
			// 这里一定要注意兼容不然很可能踩坑          
			transform: translate(-50%, 0);
			-webkit-transform: translate(-50%, 0);
			z-index: 99;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.dot {
				width: 14upx;
				height: 14upx;
				border-radius: 50%;
				margin-left: 10upx;
				margin-right: 10upx;
				background-color: #AD1E22;
				transition: all .6s;
			}

			.active {
				width: 14upx;
				height: 14upx;
				border-radius: 50%;
				background-color: #FFFFFF;
			}
		}

		.desc-wrap {
			box-sizing: border-box;
			width: 100%;
			height: 98upx;
			padding: 24upx 66upx 0;

			.title {
				width: 100%;
				height: 42upx;
				line-height: 42upx;
				color: #222222;
				font-size: 30upx;
				font-family: 'PingFangTC-Regular';
				font-weight: 600;
				text-align: left;
			}

			.desc {
				margin-top: 4upx;
				width: 100%;
				height: 34upx;
				line-height: 34upx;
				color: #999999;
				font-size: 24upx;
				font-family: 'PingFangTC-Regular';
				text-align: left;
			}
		}

		@keyframes descAnimation {
			0% {
				opacity: 1;
			}

			25% {
				opacity: .5;
			}

			50% {
				opacity: 0;
			}

			75% {
				opacity: .5;
			}

			100% {
				opacity: 1;
			}
		}

		@-webkit-keyframes descAnimation {
			0% {
				opacity: 1;
			}

			25% {
				opacity: .5;
			}

			50% {
				opacity: 0;
			}

			75% {
				opacity: .5;
			}

			100% {
				opacity: 1;
			}
		}

		.hideAndShowDesc {
			animation: descAnimation .3s ease 1;
			-webkit-animation: descAnimation .3s ease 1;
		}
	}
</style>
